<template>
  <div style="margin-left: 5px;">
    <div>
      <div>
        <h3 style="display:inline-block">{{Data.CodeNum}}.</h3>
        <span v-html="Data.Title" style="display:inline-block"></span>
      </div>

      <div class="option-area" style="margin: 5px;" v-if="!lixian">
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="Data.QuestionText"></el-input>
      </div>

      <!-- 离线表格模式-->
      <div v-if="lixian">
        <table border="1px" cellspacing="0" style="width: 50%">
          <td style="height:200px"></td>
        </table>
      </div>
    </div>

    <el-row>
      <el-col v-if="canEdit==true" :span="24">
        <div style="margin: 5px;margin-top:15px">
          <el-checkbox v-model="Data.MustAnswer">必答题</el-checkbox>
          <el-divider content-position="center">设置标题</el-divider>
          <el-card class="box-card" style="margin-top:20px">
            <EditorComponent v-model="Data.Title" :Html="Data.Title"/>

            <el-button type="text" @click="lixian=!lixian">离线模式</el-button>
            <el-button type="warning " style="margin-top:5px;width:100%" @click="canEdit=false">完成编辑</el-button>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import TBaseQuestion from "./ts/TBaseQuestion";
import OpenQuestionSubject, {
  OpenQuestionOption
} from "./ts/OpenQuestionSubject";
import { QuestionTypes } from "./ts/QuestionDataTypes";
import EditorComponent from "./EditorComponent.vue";

@Component({
  components: { EditorComponent }
})
export default class OpenQuestionComponent extends TBaseQuestion<
  OpenQuestionOption,
  OpenQuestionSubject
> {
  $name: string = "ParagraphComponent";


  CheckedValues: Array<string> = [];

  constructor() {
    super(OpenQuestionOption, OpenQuestionSubject);
    this.Data.QuestionType = QuestionTypes.qtOpenQuestion;
    this.Data.Title = "开放题标题";
  }

  mounted() {
    super.mounted();
    this.initProps();

    console.info("component mounted!");
  }

  //插入选项
  insert(id: string): void {}
  getQuestionData(): any {
    return this.Data;
  }

  setQuestionData(data: string) {}

  getTitle(): void {}

  setTitle(txt: string): void {}

  GetHtml(html: string): void {
    this.Data.Title = html;
  }
}
</script>
 
<style>
.tui table tr td {
  border: 1px solid #ccc;
}
.tui table tr th {
  border: 1px solid #ccc;
}
</style>